h1 {
    margin-bottom: 20px;
  }
  
  #text-box {
    width: 90%; /* Use percentage for responsiveness */
    max-width: 400px; /* Limit maximum width for larger screens */
    height: 200px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    margin: 0 auto; /* Center the text box */
    margin-bottom: 20px;
    background-color: #fff;
    overflow-y: scroll;
  }



  button {
    padding: 12px;
    background-color: #d9534f;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
}

  
  button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    margin-right: 10px;
    cursor: pointer;
  }
  
  button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  #copy-btn {
    background-color: #4CAF50;
    color: #fff;
  }
  
  .action-trigger {
    background-color: #ffc107;
    font-weight: bold;
  }
  
  .speaker {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    position: relative;
    animation: pulse 1s infinite;
    background-color: #4CAF50;
    border-radius: 50%;
    vertical-align: middle;
  }
  
  .speaker:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50%;
    background-color: #fff;
    border-radius: 50%;
  }
  
  .speaker.active:before {
    width: 60%;
    height: 60%;
  }
  
  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }

  /* Responsive design adjustments */
  @media screen and (max-width: 600px) {
    #text-box {
      width: 90%;
    }
  }